<template>
	<view class="content">
		<!-- :headerBg="'#fff'" -->
		<headerMain
		@goBack="goBack" :backColor="'black'"
		:headerTitle="'上传'" :titleColor="'#000'"
		/>
		
		<view class="main">
			<lsj-upload 
			    ref="lsjUpload"
			    childId="upload1"
			    :width="width"
			    :height="height"
			    :option="option"
			    :size="size"
			    :formats="formats"
			    :debug="debug"
			    :instantly="instantly"
			    @uploadEnd="onuploadEnd"
			    @progress="onprogre"
			    @change="change">
			        <view class="btn" :style="{width: width,height: height}">选择附件</view>
			</lsj-upload>
			
			
			<view class="add-img">
			    <view class="label">添加图片</view>
			    <view class="imgs flex flex-middle">
			        <image :src="item" v-for="(item,index) in fileList" :key="index"></image>
			        <image src="@/static/public/addImg.png" @click="chooseImg"></image>
			    </view>
			</view>
			<!--因为要用到canvas，而项目中不能显示canvas，所以对它进行了隐藏-->
			<view style="width: 0; height: 0; overflow: hidden; visibility: hidden;">
			    <canvas class='canvas' :style="{'width': canvasWdith+'px', 'height': canvasHeight+'px'}" canvas-id="firstCanvas"></canvas>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload'
	export default {
		components:{
			lsjUpload
		},
		data(){
			return{
				// 上传接口参数
				option: {
					// 上传服务器地址，需要替换为你的接口地址
					url: 'https://up-z2.qiniup.com', // 该地址非真实路径，需替换为你项目自己的接口地址
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						
					},
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '180rpx',
				height: '180rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 30,
				// 文件数量限制
				count: 2,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: true,
	
				// 演示用
				tabIndex: 0,
				list:[], 
				
				fileList:[],
				canvasWdith:0,
				canvasWidth:0,
				canvasHeight:0,
				font_size:0,
				markAlign: 'bottomRight'
			}
		},
		onShow() {
			this.ctx = uni.createCanvasContext('watermarkCanvas', this);
		},
		onReady() {
			setTimeout(()=>{
				// console.log('----演示动态更新参数-----');
				// this.$refs['lsjUpload'+this.tabIndex].setData('formData.orderId','动态设置的参数'); 
				// console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
				// this.onTab(0);
			},2000)
		},
		methods: {
			chooseImg(){
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album','camera'],
					success: function (res) {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: (ress) => {
								let filePath = res.tempFilePaths[0];
								let fillTexts = ['水印1', '水印2'];
								that.drawImage(filePath, fillTexts);
								return;
								let ctx = uni.createCanvasContext('firstCanvas');
								let date = "水印内容水印内容水印内容水印内";
								let textWidth = ctx.measureText(date).width;
								let imgWidth = ress.width/4;
								let imgHeight = ress.height/4;
								that.canvasWdith=imgWidth;
								that.canvasHeight=imgHeight;
								that.$nextTick(() => {
									//将图片src放到cancas内，宽高为图片大小
									ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight);
									//将声明的时间放入canvas
									ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
									ctx.setFillStyle('white')
									ctx.fillText(date, 0, imgHeight-20)    //水印内容，位置
									// ctx.strokeText(date, ress.width, ress.height)
									uni.showLoading({
										title: '制作水印中...',
									})
									ctx.draw(false, () => {//开始制作
										setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
											uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
												canvasId: 'firstCanvas',
												success: (res) => {
													uni.hideLoading();
													console.log("结果：",res.tempFilePath)
												}
											})
										}, 500)
									})
								})
							}
						})
					}
				});
			},
			/**
			* 绘制单个图片
			*/
			drawImage(filePath, fillTexts) {
				return new Promise((resolve, reject) => {
					uni.showLoading({ title: '图片处理中···' });
					const ctx = (this.ctx || uni.createCanvasContext('watermarkCanvas', this));
					uni.getImageInfo({
						src: filePath,
						success: (image) => {
							console.log("image：",image);
							this.canvasWidth = image.width + 'px';
							this.canvasHeight = image.height + 'px';
							// this.fontSize = image.height>1000?image.height*0.2:40
							this.font_size = image.height * 0.02
							ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
							ctx.drawImage(filePath, 0, 0, image.width, image.height);
	
							ctx.setFontSize(this.font_size);
							ctx.setFillStyle('red');
							// 设置阴影
							ctx.shadowColor = 'rgba(0, 0, 0, 1.0)';
							ctx.shadowOffsetX = 2;
							ctx.shadowOffsetY = 2;
							// 设置水平对齐方式
							/**
							 * 设置文本的水平对齐方式，默认：start，文本在指定的位置开始。
							 * end	文本在指定的位置结束。
							 * center 文本的中心被放置在指定的位置。
							 * left	文本左对齐。
							 * right	文本右对齐。
							 */
							ctx.textAlign = 'start';
							// 设置垂直对齐方式
							 /**
							 * 设置文本的垂直对齐方式，默认：alphabetic文本基线是普通的字母基线。
							 * top	文本基线是 em 方框的顶端。
							 * hanging	文本基线是悬挂基线。
							 * middle	文本基线是 em 方框的正中。
							 * ideographic	文本基线是表意基线。
							 * bottom	文本基线是 em 方框的底端。
							 */
							ctx.textBaseline = 'alphabetic';
							const maxText = fillTexts.reduce((text, val) => {
								return text.length >= val.length ? text : val;
							});
							fillTexts.forEach((mark, index) => {
								if (this.markAlign == "bottomRight") {
									ctx.fillText(mark, image.width - (ctx.measureText(maxText).width + 60), image.height - (index * 60 + 60));
								} else if (this.markAlign == "topLeft") {
									ctx.fillText(mark, 20, (index * 60 + 60));
								} else if (this.markAlign == "topRight") {
									ctx.fillText(mark, image.width - (ctx.measureText(maxText).width + 60), (index * 60 + 60));
								} else {
									ctx.fillText(mark, 20, image.height - (index * 60 + 60));
								}
							});
							console.log("ctx：",ctx);
							ctx.draw(false, (() => {
								setTimeout(() => {
									uni.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: image.width,
										height: image.height,
										destWidth: image.width,
										destHeight: image.height,
										canvasId: 'watermarkCanvas',
										fileType: 'jpg',
										quality: 1,
										success: (res) => {
											console.log("----------：",res.tempFilePath);
										},
										fail: (err) => {
											console.log(err)
										},
										complete: () => {
											resolve();
											uni.hideLoading();
										}
									}, this);
								}, 300);
							})());
						},
						fail: (e) => {
							resolve();
							uni.hideLoading();
						}
					});
				});
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */
			onuploadEnd(item) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);
	
				// 更新当前窗口状态变化的文件
				this.files.set(item.name,item);
	
				// ---可删除--演示上传完成后取服务端数据
				if (item['responseText']) {
					console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
	
				// 微信小程序Map对象for循环不显示，所以转成普通数组，
				// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
	
				// 强制更新视图
				this.$forceUpdate();
	
				// ---可删除--演示判断是否所有文件均已上传成功
				let isAll = [...this.files.values()].find(item=>item.type!=='success');
				if (!isAll) {
					console.log('已全部上传完毕');
				}
				else {
					console.log(isAll.name+'待上传');
				}
	
			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogre(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name,item);
	
				console.log('打印对象',JSON.stringify(this.files.get(item.name)));
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
	
				// 强制更新视图
				this.$forceUpdate();
	
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			change(files) {
				console.log('当前选择的文件列表：',JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
	
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
	
				// ---可删除--演示重新定位覆盖层控件
				this.$nextTick(()=>{
					console.log('演示重新定位');
					this.$refs.lsjUpload0.show();
					this.$refs.lsjUpload1.show();
					this.$refs.lsjUpload2.show();
				});
	
			},
			// 手动上传
			upload() {
				// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
				this.$refs['lsjUpload'+this.tabIndex].upload();
			},
			/**
			 * 指定上传某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			resetUpload(name) {
				this.$refs['lsjUpload'+this.tabIndex].upload(name);
			},
			/**
			 * 移除某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs['lsjUpload'+this.tabIndex].clear(name);
			},
			/**
			 * ---可删除--演示在组件上方添加新内容DOM变化
			 * DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
			 * 什么是DOM重排？自行百度去
			 */
			add() {
				this.list.push('DOM重排测试');
			},
			/**
			 * ---可删除--演示Tab切换时覆盖层是否能被点击
			 * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
			 * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
			 */
			onTab(tabIndex) {
				this.$refs.lsjUpload0.hide();
				this.$refs.lsjUpload1.hide();
	
				this.tabIndex = tabIndex;
	
				this.$nextTick(()=>{
					this.$refs['lsjUpload'+this.tabIndex].show();
				})
	
			},
			/**
			 * 打开nvue窗口查看非跟随窗口滚动效果
			 */
			open() {
				uni.navigateTo({
					url: '/pages/nvue-demo/nvue-demo'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
</style>